<template>
	<div class="center">
		<div class="cnetertop">你好!{{userifo.username}}同学</div>
		<el-form :model="passForm" status-icon :rules="rules" ref="passForm" label-width="100px">
			<el-form-item label="旧密码" prop="currentPass" >
			  <el-input type="password" v-model="passForm.currentPass" autocapitalize="off"></el-input>
			</el-form-item>
			<el-form-item label="新密码" prop="password" >
			  <el-input type="password" v-model="passForm.password" autocapitalize="off"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="checkPass" >
			  <el-input type="password" v-model="passForm.checkPass" autocapitalize="off"></el-input>
			</el-form-item>
			<el-form-item>
			  <el-button type="primary" @click="submitForm('passForm')">提交</el-button>
			  <el-button @click="resetForm('passForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
	import axios from 'axios'
	import{  onBeforeUpdate,reactive, watch}from'vue'
	
	let passForm=reactive({
		password:'',
		checkPass:'',
		currentPass:''
	})
	let rules=reactive({
		password: [
		  { required: true, message: '新密码', trigger: 'blur' },
		  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
		],
		checkPass: [
		  { required: true, message: '确认密码', trigger: 'blur' },
		  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
		],
		currentPass: [
					{ required: true, message: '旧密码', trigger: 'blur' },
		  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
		],
	})
	let userifo=reactive({
		id:'',
		username:'',
		avatar:''
	})
	let getinfo= async ()=>{
		try{
			return await axios.get('/sys/userinfo').then(res=>{
				// userifo=res.data.data
				Object.assign(userifo,res.data.data)
				
			}
				
			)
		}catch (e){
			return await e
		}
	}
	const submitForm=function(formName) {
		// this.$refs[formName].validate((valid) => {
	 //    if (valid) {
	 //   //    axios.post('/login',passForm).then(res=>{
				
		// 		// })
	 //    } else {
	 //      console.log('error submit!!');
	 //      return false;
	 //    }
	 //  });
	}
	
	
	
	
	getinfo()
</script>
	
<style>
	

	.cnetertop{
	
	}
	.el-form-item{
		width: 400PX;
	}
</style>